<template>
  <div class="print-preview-page">
    <div class="print-preview-page-top">
      <div class="tool-item" @click="handleChangePage('previous')">
        <i class="el-icon-back"></i>
      </div>

      <span style="width:64px;min-width: 64px; text-align: center;"
        >{{ pageIndex }} / {{ pageTotalNum }}</span
      >
      <div class="tool-item" @click="handleChangePage('next')">
        <i class="el-icon-right"></i>
      </div>
      <el-divider direction="vertical" />
      <div class="tool-item" @click="handleChangePercent(-10)">
        <i class="el-icon-minus"></i>
      </div>

      <span style="width:40px;min-width: 40px; text-align: right;"
        >{{ scale }}%</span
      >
      <div class="tool-item" @click="handleChangePercent(10)">
        <i class="el-icon-plus" @click="handleChangePercent(10)"></i>
      </div>

      <div
        class="mr-8"
        style="text-align: right;flex-grow: 2;min-width: 180px;"
      >
        <el-button
          v-if="isShowClose"
          icon="learun-icon-left-arrow"
          size="mini"
          @click="handleClose()"
          >{{ $t('返回') }}</el-button
        >
        <l-print-btn :schema="pageSchema" isPreview></l-print-btn>
      </div>
    </div>

    <div class="l-rblock">
      <page
        isPreview
        :pageConfig="pageConfig"
        :components="pageConfig.isHeaderShow == '1'? pageActiveObj.components.filter(t=>!t.config.isHeader) :pageActiveObj.components"
        :headerComponents="headerComponents"
        :scale="myScale"
        :pageHeight="pageHeight"
        :pageWidth="pageWidth"
        :pageActive="pageIndex - 1"
        :pageNumbers="pages.length"
      ></page>
    </div>
  </div>
</template>

<script>
import { getPageHeight, getPageWidth } from "./config/util";
import page from "./formComponent/page";
export default {
  components: { page },
  props: {
    pageSchema: {
      type: Object,
      default: () => ({}),
    },
    isShowClose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      pageIndex: 1,
      scale: 100,
    };
  },
  computed: {
    pageConfig() {
      return this.pageSchema.pageConfig;
    },
    pages() {
      return this.pageSchema.pages || [];
    },
    pageTotalNum() {
      return this.pages.length;
    },

    pageActiveObj() {
      return this.pages[this.pageIndex - 1];
    },

    pageHeight() {
      if (this.pageConfig.direction == "1") {
        return this._pageHeight;
      } else {
        return this._pageWidth;
      }
    },
    pageWidth() {
      if (this.pageConfig.direction == "1") {
        return this._pageWidth;
      } else {
        return this._pageHeight;
      }
    },

    _pageHeight() {
      return getPageHeight({
        pageType: this.pageConfig.pageType,
        height: this.pageConfig.pageHeight,
      });
    },
    _pageWidth() {
      return getPageWidth({
        pageType: this.pageConfig.pageType,
        width: this.pageConfig.pageWidth,
      });
    },

    myScale() {
      return this.scale / 100;
    },
    headerComponents(){
      return this.pages[0].components.filter(t=>t.config.isHeader);
    }
  },
  methods: {
    handleChangePage(type) {
      if (type === "previous" && this.pageIndex > 1) {
        this.pageIndex--;
      }
      if (type === "next" && this.pageIndex < this.pageTotalNum)
        this.pageIndex++;
    },
    handleChangePercent(num) {
      if (this.scale == 10 && num < 0) {
        return;
      }
      if (this.scale == 990 && num > 0) {
        return;
      }
      this.scale += num;
    },
    handleClose() {
      this.pageIndex = 1;
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss">
.print-preview-page {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 40px;
  &-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #f8f8f8;
    display: flex;
    align-items: center;

    .tool-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 100%;
      min-width: 40px;
      cursor: pointer;

      &-btn {
        width: 100%;
        height: 21px;
        text-align: center;
        border-right: 1px solid #ddd;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &:hover,
      &.active {
        background-color: #fff;
      }

      img {
        vertical-align: middle;
      }
    }
  }

  .l-draggable{
    padding: 0 !important;
  }
}
</style>
